<template>
  <el-row style="margin: 20px" :gutter="50">
    <el-col :span="12">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="时间范围" prop="infoId">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getCategoryCount"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-card>
        <div slot="header" class="clearfix">
          <span>产品销售饼状图</span>
        </div>
        <PieChartNormal
          title="热卖商品分析报表"
          :chartData="chartData"
        /> </el-card
    ></el-col>
    <el-col :span="12">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="年份" prop="infoId">
          <el-date-picker
            v-model="queryParams2.year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getMonthCount"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-card>
        <div slot="header" class="clearfix">
          <span>月度销售额柱状图</span>
        </div>
        <BarChartNormal title="月度销售额统计报表" :chartData="chartData2" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import PieChartNormal from "@/views/echarts/PieChartNormal.vue";
import BarChartNormal from "@/views/echarts/BarChartNormal.vue";
import { categoryCount, monthCount } from "@/api/sale/statistics";
import { parseTime } from "@/utils/common";

export default {
  name: "statistics",
  components: {
    PieChartNormal,
    BarChartNormal,
  },
  data() {
    return {
      chartData: {
        data: [
          {
            name: "测试",
            value: 0,
          },
        ],
      },
      chartData2: {
        xData: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        yData: [
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
          "1.11",
        ],
      },
      queryParams: {
        dateRange: [
          parseTime(new Date(new Date().setHours(0, 0, 0, 0))),
          parseTime(new Date()),
        ],
      },
      queryParams2: {
        year: parseTime(new Date(), "{y}"),
      },
    };
  },
  created() {
    this.getCategoryCount();
    this.getMonthCount();
  },
  methods: {
    getCategoryCount() {
      categoryCount({
        startDate: this.queryParams.dateRange[0],
        endDate: this.queryParams.dateRange[1],
      }).then((response) => {
        this.chartData.data = response.data;
      });
    },
    getMonthCount() {
      monthCount({
        year: this.queryParams2.year,
      }).then((response) => {
        this.chartData2.xData = [];
        this.chartData2.yData = [];
        response.data.forEach((item) => {
            this.chartData2.xData.push(item.xdata);
            this.chartData2.yData.push(item.ydata);
        });
      });
    },
  },
};
</script>

<style></style>
